<template>
  <div class="register">
    <div class="regTop">
      <span>Forget Password</span>
     <!-- <a class="back" href="index.html">&lt;&nbsp;Back</a>-->
    </div>
    <div class="content">
      <div class="point">
        <span id='notice'>We will send the verification code to your mobile phone</span>
      </div>
      <form action="a.html" method="post" @submit.prevent="dp()">
        <div class="message">
          <input type="text" name="userName" placeholder="Please Enter  Phone Number" @blur="getUserName()"
                 id="userName"/>
          <input type="tel" name="tel" id='tel' placeholder="Please Enter  ID Card No" @blur="getTel()"/>
          <input type="password" name='pw' id='pw' placeholder="Please Enter your new 6-25 passwords" @blur="getPass()"/>
          <input type="password" name='rpw' id='rpw' placeholder="confirm passwords" @blur="getrpw()"/>
          <input type="text" name='identify' id='identify' placeholder="Enter Security Code"/>
          <div class="icons">
            <b><img src="../assets/images/zc-1.jpg" alt=""/></b>
            <b><img src="../assets/images/zc-2.jpg" alt=""/></b>
            <b><img src="../assets/images/zc-3.jpg" alt=""/></b>
            <b><img src="../assets/images/zc-3.jpg" alt=""/></b>
            <b><img src="../assets/images/zc-3.jpg" alt=""/></b>
          </div>
          <a class="code" href="">Enter Security Code</a>
        </div>

        <input class="submit" name='sub' type='submit' value="Submit"/>
      </form>
    </div>
    <div class="dbgao" style="height:80px;"></div>
  </div>

</template>
<script>


  export default{
    mounted(){

    },
    methods: {
      getUserName(){
        var notice = document.getElementById('notice');
        var userName = document.getElementById('userName');
        var pw = document.getElementById('pw');
        var rpw = document.getElementById('rpw');
        var telSeg = /^[a-zA-Z0-9_-]{4,16}$/;
        if (userName.value.length < 1) {
          notice.innerHTML = "Nicknames cannot be empty！";
          notice.style.color = 'red';
          return false;
        } else if (!telSeg.test(userName.value)) {
          notice.innerHTML = 'Nicknames format is not correct';
          notice.style.color = 'red';
          return false;
        } else {
          notice.innerHTML = 'Nicknames is correct';
          notice.style.color = 'green';
          return true;
        }
      },
      getTel()
      {
        var notice = document.getElementById('notice');
        var tel = document.getElementById('tel');
        var pw = document.getElementById('pw');
        var rpw = document.getElementById('rpw');
        var telSeg = /^((?:\+27|27)|0)(=72|82|73|83|74|84)(\d{7})$/;
        //
        if (tel.value.length < 1) {
          notice.innerHTML = "The phone number can't be empty！";
          notice.style.color = 'red';
          return false;
        } else if (!telSeg.test(tel.value)) {
          notice.innerHTML = 'The phone number format is not correct';
          notice.style.color = 'red';
          return false;
        } else if (tel.value.length != 10) {
          notice.innerHTML = 'The phone number format is not correct';
          notice.style.color = 'red';
          return false;
        } else {
          notice.innerHTML = 'Phone number format is correct';
          notice.style.color = 'green';
          return true;
        }
      },
      getPass()
      {
        var notice = document.getElementById('notice');
        var tel = document.getElementById('tel');
        var pw = document.getElementById('pw');
        var rpw = document.getElementById('rpw');
        var pwSeg = /^[0-9A-Za-z]{6,25}$/;
        if (pw.value.length < 1) {
          notice.innerHTML = ' Password cant be empty';
          notice.style.color = 'red';
          return false;
        } else if (!pwSeg.test(pw.value)) {
          notice.innerHTML = 'Incorrect password format';
          notice.style.color = 'red';
          return false;
        } else {
          notice.innerHTML = 'Correct password format';
          notice.style.color = 'green';
          return true;
        }

      },
      getrpw() {
        var notice = document.getElementById('notice');
        var tel = document.getElementById('tel');
        var pw = document.getElementById('pw');
        var rpw = document.getElementById('rpw');

        if (rpw.value.length < 1) {
          notice.innerHTML = ' rePassword cant be empty';
          notice.style.color = 'red';
          return false;
        }

        if (rpw.value != pw.value) {
          notice.innerHTML = 'The passwords are not consistent. Please fill in again';
          notice.style.color = 'red';
          pw.value = "";
          return false;
        } else {
          return true;
        }
      },
      sub() {
        var notice = document.getElementById('notice');
        var tel = document.getElementById('tel');
        var pw = document.getElementById('pw');
        var rpw = document.getElementById('rpw');
        var pwSeg = /^[0-9A-Za-z]{6,25}$/;
        if (this.getTel() && this.getPass() && this.getrpw() && $("#agree").is(":checked")) {
          return false;
        } else {
          return true;
        }
      },
      dp() {
        var notice = document.getElementById('notice');
        var userName = document.getElementById('userName');
        var tel = document.getElementById('tel');
        var type = document.getElementById('type');
        var pw = document.getElementById('pw');
        var rpw = document.getElementById('rpw');
        if (this.getTel() && this.getPass() && this.getrpw() && $("#agree").is(":checked")) {
          this.$http.post(global.URL + "/registerSubmit", {
            userName: userName.value,
            telephone: tel.value,
            password: pw.value,
            type: type.value
          }, {emulateJSON: true})
            .then((response) => {
                if (response.data) {
                  alert("Registered Successfully");
                  this.$router.replace({path: '/login'})
                } else {
                  alert("Register Fail,Maybe the phone number has been registered");
                }
              },
              (error) => {
                alert("Register  Fail,Please connect with manager");
              }
            );
          return true;
        } else {
          return false;
        }
      },

    },
    components: {}
  }
</script>
<style>

  @import '../assets/css/common.css';
  @import '../assets/css/register.css';
</style>

